<template>
  <el-dialog
    title="征信开户"
    :visible.sync="dialogVisible"
    width="650px"
  >
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      label-width="100px"
    >
      <el-divider content-position="center">产品信息</el-divider>
      <el-form-item label="期数">
        <el-input
          v-model="formData.product_info.period"
          placeholder="期数"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="产品类型">
        <el-select
          v-model="formData.product_info.pay_type_id"
          clearable
          placeholder="请选择产品类型"
          :disabled="true"
        >
          <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="担保方式">
        <el-select
          v-model="formData.product_info.business_type_id"
          clearable
          placeholder="请选择担保方式"
          :disabled="true"
        >
          <el-option
            v-for="item in menu_dbfs"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="月利率">
        <el-input
          v-model="formData.product_info.interest_rate"
          placeholder="月利率"
          :disabled="true"
        />
        %
      </el-form-item>
      <el-divider content-position="center">订单信息</el-divider>
      <el-form-item label="合同号">
        <el-input
          v-model="formData.order_info.contract_no"
          placeholder="合同号"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="合同金额">
        <el-input
          v-model="formData.order_info.contract_amount"
          placeholder="合同金额"
          :disabled="true"
        />
        元
      </el-form-item>
      <el-form-item label="开户日期">
        <el-date-picker
          v-model="formData.order_info.open_date"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="到期日期">
        <el-date-picker
          v-model="formData.order_info.due_date"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="放款金额">
        <el-input
          v-model="formData.order_info.loan_amount"
          placeholder="放款金额"
          :disabled="true"
        />
        元
      </el-form-item>
      <el-form-item label="业务发生地">
        <el-cascader
            v-model="formData.order_info.apply_dist"
            clearable
            filterable
            placeholder="请选择"
            :options="areaList"
            :props="optionProps"
            :disabled="true"
            separator="-"
        />
<!--        <el-input-->
<!--          v-model="formData.order_info.apply_dist"-->
<!--          placeholder="业务发生地"-->
<!--          :disabled="true"-->
<!--        />-->
      </el-form-item>
      <!-- <el-form-item label="债转告知书">
        <el-input
          v-model="formData.order_info.contract_url"
          placeholder="债转告知书"
        />
      </el-form-item> -->
      <el-divider content-position="center">个人信息</el-divider>
      <el-form-item label="姓名">
        <el-input
          v-model="formData.personal_info.name"
          placeholder="姓名"
        />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input
          v-model="formData.personal_info.id_no"
          placeholder="身份证号"
        />
      </el-form-item>
      <el-form-item label="性别">
        <el-select
          v-model="formData.personal_info.sex"
          clearable
          placeholder="请选择性别"
        >
          <el-option
            key="0"
            label="未知"
            value="0"
          />
          <el-option
            key="1"
            label="男"
            value="1"
          />
          <el-option
            key="2"
            label="女"
            value="2"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input
          v-model="formData.personal_info.phone"
          placeholder="手机号码"
        />
      </el-form-item>
      <el-form-item label="学历">
        <el-select
          v-model="formData.personal_info.edu_level"
          clearable
          placeholder="请选择学历"
        >
          <el-option
            v-for="item in menu_xl"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学位">

        <el-select
          v-model="formData.personal_info.edu_degree"
          clearable
          placeholder="请选择学历"
        >
          <el-option
            v-for="item in menu_xw"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="户籍地址">
        <el-input
          v-model="formData.personal_info.id_address"
          placeholder="户籍地址"
        />
      </el-form-item>
      <el-form-item label="户籍行政区">
        <el-cascader
          v-model="formData.personal_info.id_dist"
          clearable
          filterable
          placeholder="请选择"
          :options="areaList"
          :props="optionProps"
          separator="-"
        />
        <!-- <el-input
          v-model="formData.personal_info.id_dist"
          placeholder="户籍行政区"
        /> -->
      </el-form-item>
      <el-form-item label="就业情况">
        <el-select
          v-model="formData.personal_info.emp_status"
          clearable
          placeholder="请选择就业情况"
        >
          <el-option
            v-for="item in menu_jyzk"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职业">
        <el-select
          v-model="formData.personal_info.profession"
          clearable
          placeholder="请选择职业"
        >
          <el-option
            v-for="item in menu_zy"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="居住情况">
        <el-select
          v-model="formData.personal_info.residence_status"
          clearable
          placeholder="请选择居住情况"
        >
          <el-option
            v-for="item in menu_jzqk"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="居住地址">
        <el-input
          v-model="formData.personal_info.residence_address"
          placeholder="居住地址"
        />
      </el-form-item>
      <el-form-item label="居住行政区划">
        <el-cascader
          v-model="formData.personal_info.residence_dist"
          clearable
          filterable
          placeholder="请选择"
          :options="areaList"
          :props="optionProps"
          separator="-"
        />
        <!-- <el-input
          v-model="formData.personal_info.residence_dist"
          placeholder="居住行政区划"
        /> -->
      </el-form-item>
      <el-form-item label="居住邮编">
        <el-input
          v-model="formData.personal_info.residence_postcode"
          placeholder="居住邮编"
        />
      </el-form-item>
      <el-form-item label="婚姻状况">
        <el-select
          v-model="formData.personal_info.marriage_status"
          clearable
          placeholder="请选择婚姻状况"
        >
          <el-option
            v-for="item in menu_hyzk"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-divider content-position="center">还款计划表</el-divider>
<!--    <el-button-->
<!--      type="primary"-->
<!--      @click="addJH()"-->
<!--    >增加计划</el-button>-->
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      label-width="100px"
    >

      <div v-for="(item,index) of huanList" :key="index">
        <div style="margin:30px;color:red;font-size:26px">第{{ index+1 }}期
<!--          <el-button-->
<!--            type="primary"-->
<!--            @click="deleteJH(index)"-->
<!--          >删除计划</el-button>-->
        </div>

        <el-form-item label="计划还款日期">
          <el-date-picker
            v-model="item.plan_repay_time"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="期数">
          <el-input
            v-model="item.period"
            placeholder="期数"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="应还本金">
          <el-input
            v-model="item.current_principal"
            placeholder="应还本金"
            :disabled="true"
          />
          元
        </el-form-item>
        <el-form-item label="应还利息">
          <el-input
            v-model="item.current_interest"
            placeholder="应还利息"
            :disabled="true"
          />
          元
        </el-form-item>
        <el-form-item label="应还总额">
          <el-input
            v-model="item.total_repay"
            placeholder="应还总额"
            :disabled="true"
          />
          元
        </el-form-item>
      </div>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        v-if="selectRow.rick_status == 0 || selectRow.rick_status == 3"
        size="small"
        type="primary"
        @click="submit"
      >开 户</el-button>
      <el-button
        size="small"
        @click="save"
      >保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Levinwang_open, Levinwang_save, Levinwang_saveGet } from '@/api/marketing'
import { getAreas } from '@/api/index'
export default {
  props: {
    dialogTitle: {
      type: String
    },
    selectRow: {
      type: Object
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        product_info: {
          period: 1,
          pay_type_id: 1,
          interest_rate: 0,
          business_type_id: 4
        },
        order_info: {
          contract_no: '',
          contract_amount: 0,
          open_date: '',
          due_date: '',
          loan_amount: 0,
          apply_dist: '',
          contract_url: ''
        },
        personal_info: {
          name: '',
          id_no: '',
          sex: '',
          phone: '',
          edu_level: '',
          edu_degree: '',
          id_address: '',
          id_dist: '',
          emp_status: '',
          residence_status: '',
          residence_address: '',
          residence_dist: '',
          residence_postcode: '',
          marriage_status: ''

        }
      },
      huanList: [],

      //
      menu_dbfs: [
        { id: 1, value: '质押' },
        { id: 2, value: '抵押' },
        { id: 3, value: '自然人保证' },
        { id: 4, value: '信用/免担保' },
        { id: 5, value: '组合（含自然人保证）' },
        { id: 6, value: '组合（不含自然人保证）' },
        { id: 7, value: '农户联保' },
        { id: 9, value: '其他' }
      ],
      typeList:[
        { id: 1, value: '等额本息' },
        { id: 2, value: '先息后本' },
      ],
      menu_xl: [
        { id: 1, value: '小学' },
        { id: 2, value: '初中' },
        { id: 3, value: '技校' },
        { id: 4, value: '高中' },
        { id: 6, value: '大专' },
        { id: 7, value: '本科' },
        { id: 9, value: '其他' }
      ],
      menu_xw: [
        { id: 1, value: '名誉博士' },
        { id: 2, value: '博士' },
        { id: 3, value: '硕士' },
        { id: 4, value: '学士' },
        { id: 9, value: '未知' },
        { id: 0, value: '其他' }
      ],
      menu_jyzk: [
        { id: 11, value: '国家公务员' },
        { id: 13, value: '专业技术人员' },
        { id: 17, value: '职员' },
        { id: 21, value: '企业管理人员' },
        { id: 24, value: '工人' },
        { id: 27, value: '农民' },
        { id: 31, value: '学生' },
        { id: 37, value: '现役军人' },
        { id: 51, value: '自由职业者' },
        { id: 70, value: '无业人员' },
        { id: 80, value: '退（离）休人员' },
        { id: 90, value: '其他' }
      ],
      menu_hyzk: [
        { id: 0, value: '未说明的婚姻状况' },
        { id: 1, value: '未婚' },
        { id: 2, value: '已婚' },
        { id: 3, value: '离异' },
        { id: 4, value: '丧婚' },
        { id: 5, value: '初婚' },
        { id: 6, value: '再婚' },
        { id: 7, value: '复婚' }
      ],
      menu_jzqk: [
        { id: 1, value: '自置' },
        { id: 2, value: '按揭' },
        { id: 3, value: '亲属楼宇' },
        { id: 4, value: '集体宿舍' },
        { id: 5, value: '租房' },
        { id: 6, value: '共有住宅' },
        { id: 7, value: '其他' },
        { id: 9, value: '未知' }
      ],
      menu_zy: [
        { id: 0, value: '国家机关、党群组织、企业、事业单位负责人' },
        { id: 1, value: '专业技术人员' },
        { id: 3, value: '办事人员和有关人员' },
        { id: 4, value: '商业、服务业人员' },
        { id: 5, value: '农、林、牧、渔、水利业生产人员' },
        { id: 6, value: '生产、运输设备操作人员及有关人员' },
        { id: 'X', value: '军人' },
        { id: 'Y', value: '不便分类的其他从业人员' },
        { id: 'Z', value: '未知' }
      ],
      newList:[],
      default_repai_plan: {
        plan_repay_time: '', // yyyy-MM-dd
        period: 0,
        current_principal: 0,
        current_interest: 0,
        total_repay: 0
      },
      areaList: [],
      optionProps: {
        value: 'rid',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData()
      }
    }
  },
  methods: {
    nullToStr(data) {
      for (var x in data) {
        if (data[x] === null) { // 如果是null 把直接内容转为 ''
          data[x] = ''
        } else {
          if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
            data[x] = data[x].map(z => {
              return this.nullToStr(z)
            })
          }
          if (typeof (data[x]) === 'object') { // 是json 递归继续处理
            data[x] = this.nullToStr(data[x])
          }
        }
      }
      return data
    },
    addJH() {
      this.huanList.push(JSON.parse(JSON.stringify(this.default_repai_plan)))
    },
    deleteJH(index) {
      this.huanList.splice(index, 1)
    },
    submit() {
      // this.formData = {
      //   'product_info': {
      //     'period': 2,
      //     'pay_type_id': 2,
      //     'interest_rate': '1.2%',
      //     'business_type_id': 1
      //   },
      //   'order_info': {
      //     'contract_no': 'HT-TEST1034',
      //     'contract_amount': 5000000,
      //     'open_date': '2021-10-01',
      //     'due_date': '2022-10-01',
      //     'loan_amount': 5000000,
      //     'apply_dist': '350100',
      //     // 'contract_url': 'http://xiamen.chinatax.gov.cn/xmswcms/upload/file/20200601/1590998763771045422.pdf?t=aa'
      //     // 'id_contract_url': 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png?t=abcd'
      //     'contract_url': 'https://zuxiaoqi-file.oss-cn-beijing.aliyuncs.com/pdf/1590998763771045422.pdf'
      //     // 'id_contract_url': 'https://zuxiaoqi-file.oss-cn-beijing.aliyuncs.com/pdf/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
      //   },
      //   'personal_info': {
      //     // 'postal_dist': '350111',
      //     // 'meta_name': '配偶名1',
      //     'edu_degree': '4',
      //     // 'meta_company': '配偶公司',
      //     // 'meta_tel': '13705060646',
      //     // 'company_nature': '40',
      //     // 'hired_date': '2021-04-01',
      //     // 'company_address': '福建省福州市仓山区',
      //     'id_address': '福建省福州市晋安区',
      //     'profession_title': '1',
      //     'id_no': '350823202110103778',
      //     // 'residence_tel': '',
      //     'residence_status': '9',
      //     'edu_level': '7',
      //     'emp_status': '13',
      //     // 'company_dist': '350111',
      //     // 'email': '',
      //     // 'postal_address': '福建省福州市晋安区新店镇',
      //     'profession': '1',
      //     'sex': 1,
      //     'residence_address': '福建省福州市晋安区新店镇',
      //     // 'company_postcode': '350011',
      //     // 'company_tel': '13705060646',
      //     'marriage_status': '2',
      //     // 'company_industry': '9',
      //     'residence_dist': '350111',
      //     // 'postal_postcode': '350000',
      //     'phone': '13712345678',
      //     'id_dist': '350111',
      //     // 'company_name': 'XXX集团',
      //     // 'meta_id_no': '350823200008103788',
      //     'name': '海通测试1',
      //     // 'duty': '2',
      //     'residence_postcode': '350011'
      //   },
      //   'repay_plan': [
      //     {
      //       'period': 0,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2021-10-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 1,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2021-11-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 2,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2021-12-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 3,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-01-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 4,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-02-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 5,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-03-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 6,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-04-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 7,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-05-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 8,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-06-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 9,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-07-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 10,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-08-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 11,
      //       'current_principal': 0,
      //       'current_interest': 60000,
      //       'plan_repay_time': '2022-09-01',
      //       'total_repay': 60000
      //     },
      //     {
      //       'period': 12,
      //       'current_principal': 5000000,
      //       'current_interest': 0,
      //       'plan_repay_time': '2022-10-01',
      //       'total_repay': 5000000
      //     }
      //   ]
      //   // 'signature': 'D5F4ADCE174007999D6BDB6DCB10933A'
      // }
      const pd = JSON.parse(JSON.stringify(this.formData))
      pd.product_info.interest_rate += '%'
      pd.order_info.contract_amount *= 100
      pd.order_info.loan_amount *= 100
      this.newList = [];
      this.newList = JSON.parse(JSON.stringify(this.huanList));

      if (Array.isArray(pd.personal_info.id_dist)) {
        pd.personal_info.id_dist = pd.personal_info.id_dist[pd.personal_info.id_dist.length - 1]
      }

      if (Array.isArray(pd.personal_info.residence_dist)) {
        pd.personal_info.residence_dist = pd.personal_info.residence_dist[pd.personal_info.residence_dist.length - 1]
      }

      if (Array.isArray(pd.order_info.apply_dist)) {
        pd.order_info.apply_dist = pd.order_info.apply_dist[pd.order_info.apply_dist.length - 1]
      }
      for (let index = 0; index < this.huanList.length; index++) {
        // const element = pd.repay_plan[index];
        this.newList[index].current_principal *=100
        this.newList[index].current_interest *=100
        this.newList[index].total_repay *=100
      }
     pd.repay_plan = JSON.parse(JSON.stringify(this.newList))

      Levinwang_open({ 'order_id': this.selectRow.id, 'data': pd }).then(res => {
        this.dialogVisible = false
        this.$message({
          message: '开户成功',
          type: 'success'
        })
        this.newList = [];

      })
    },
    save() {

      let pd = JSON.parse(JSON.stringify(this.formData))

      pd = this.nullToStr(pd)

      // pd.product_info.interest_rate += '%'
      // pd.order_info.contract_amount *= 100
      // pd.order_info.loan_amount *= 100

      // for (let index = 0; index < this.huanList.length; index++) {
      //   // const element = pd.repay_plan[index];
      //   this.huanList[index].current_principal *= 100
      //   this.huanList[index].current_interest *= 100
      //   this.huanList[index].total_repay *= 100
      // }
      let repay_plan = JSON.parse(JSON.stringify(this.huanList))
      repay_plan = this.nullToStr(repay_plan)

      Levinwang_save({ 'order_id': this.selectRow.id, 'data': pd, 'repay_plan': repay_plan }).then(res => {
        this.dialogVisible = false
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      })
    },
    getData() {
      this.formData = {
        product_info: {
          period: this.selectRow.month_total,
          pay_type_id: 1,
          interest_rate: 0,
          business_type_id: 4
        },
        order_info: {
          contract_no:this.selectRow.trade_no,
          contract_amount: this.selectRow.setmeal_price,
          open_date: this.selectRow.begin_time,
          due_date: this.selectRow.end_time,
          loan_amount: this.selectRow.setmeal_price,
          apply_dist:[320000, 320500],
          contract_url: ''
        },
        personal_info: {
          name: '',
          id_no: '',
          sex: '',
          phone: '',
          edu_level: '',
          edu_degree: '',
          id_address: '',
          id_dist: '',
          emp_status: '',
          residence_status: '',
          residence_address: '',
          residence_dist: '',
          residence_postcode: '',
          marriage_status: ''
        }
      }

      this.huanList = []
      getAreas().then(res => {
        this.areaList = res ? res[0].sub : []
      })

      Levinwang_saveGet({ 'order_id': this.selectRow.id }).then(res => {
        if (JSON.stringify(res.data.personal_info) != "{}") {
          this.formData.personal_info = res.data.personal_info
        }
        this.huanList = res.repay_plan ? res.repay_plan : []
      }).catch(res => {

      })

      // autoRechargeInfo(this.type).then(res => {
      //   this.infoData = { ...res } || {}
      //   this.calculate()
      // })
    },
    changeNumberInput(key, value) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.formData[key] = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form_info {
  padding: 20px 30px;
  background: #f5f5f5;
  /deep/.el-divider--horizontal {
    margin: 10px 0;
  }
}
.suffix {
  width: 28px;
  height: 28px;
  background: #e6e6e6;
  border-radius: 0px 3px 3px 0px;
  box-sizing: border-box;
  line-height: 28px;
  text-align: center;
}
.check_form {
  /deep/.el-checkbox__inner {
    border-color: #ff4146;
  }
}
.form_item {
  display: flex;
  line-height: 35px;
  & > label {
    width: 100px;
    color: #666666;
  }
  /deep/.el-input__inner {
    height: 28px;
    border-radius: 3px 0px 0px 3px;
  }
  /deep/.el-input__icon {
    line-height: 28px;
  }
}
</style>
